<!-- *************
 *@description:下半部分第三个图表
 *@author:rennan
 *@date: 2023-07-19 16:16:43
 *@version: V1.0.0
 ************ -->
<template>
  <div id="b3_chart" style="height: 100%;"></div>
</template>

<script setup>
import {onMounted} from 'vue'
import { Line } from '@antv/g2plot';
const data = [
  { Date: 'tst', rating: 10 },
  { Date: '', rating: 1},
  { Date: 'pm10', rating: 5 },
  { Date: ' ', rating: 8},
  { Date: 'pm25', rating: 5 },
];

let options={
  data,
  padding: 'auto',
  xField: 'Date',
  yField: 'rating',
  reflect: 'y',
  xAxis: {
    // because coordinate is reflectY
    position: 'top',
  },
};

const init3Chart =()=>{
  let b3Line = new Line(document.getElementById('b3_chart'),options)

  b3Line.render()
}

onMounted(()=>{
  init3Chart();
})

</script>

<style lang='scss' scoped></style>